﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/ajax/libs/zTree/v3/css/metroStyle/metroStyle.min.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/ajax//libs/zTree/v3/js/ztree.min.js"))

    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/ajax/libs/jquery-layout/jquery.layout-latest.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/ajax/libs/jquery-layout/jquery.layout-latest.js"))
}
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 组织机构
            </div>
            <div class="box-tools pull-right">
                <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i class="fa fa-edit"></i></a>
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="departmentTree" class="ztree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="user-form">
                    <input type="hidden" id="DepartmentId" name="DepartmentId">
                    <div class="select-list">
                        <ul>
                            <li>
                                登录名称：<input type="text" name="UserName" />
                            </li>
                            <li>
                                手机号码：<input type="text" name="Mobile" />
                            </li>
                            <li>
                                用户状态：<span id="userStatus" name="UserStatus"></span>
                            </li>
                            <li class="select-time">
                                <label>创建时间： </label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]" />
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]" />
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()">
                    <i class="fa fa-plus"></i> 新增
                </a>
                <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-info" onclick="importForm()">
                    <i class="fa fa-upload"></i> 导入
                </a>
                <a class="btn btn-warning" onclick="exportForm()">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <table id="gridTable" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        initTree();
        initTableGrid();
        //
        $('body').layout({ west__size: 185 });
        //绑定用户状态
      $("#userStatus").ysComboBox({ data: ys.getJson(@Html.Raw(typeof(StatusEnum).EnumToDictionaryString())) });
        //
        $('#btnExpand').click(function () {
            var tree = $.fn.zTree.getZTreeObj("departmentTree");
            tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function () {
            var tree = $.fn.zTree.getZTreeObj("departmentTree");
            tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        $('#btnRefresh').click(function () {
            initTree();
        });
    });
    /* 用户管理-初始化加载部门信息 */
    function initTree() {
        $('#departmentTree').ysTree({
            url: '@Url.Content("~/OrganizationManage/Department/GetDepartmentTreeListJson")',
            async: true,
            expandLevel: 2,
            maxHeight: "700px",
            callback: {
                onClick: function (event, treeId, treeNode) {
                    $("#DepartmentId").val(treeNode.id);
                    searchGrid();
                }
            }
        });
    }
    /* 用户管理-初始化加载表格数据 */
    function initTableGrid() {
        var queryUrl = '/OrganizationManage/User/GetPageListJson';
            var options = {
            id: "gridTable",
            url: queryUrl,
            createUrl: "/OrganizationManage/User/UserForm",
            updateUrl: "/OrganizationManage/User/UserForm",
            removeUrl: "/OrganizationManage/User/DeleteFormJson",
            exportUrl:  "/export",
            importUrl: "/importData",
            importTemplateUrl: "/importTemplate",
            sortName: "baseCreateTime",
            sortOrder: "desc",
            modalName: "用户",
            columns:
             [
               { checkbox: true },
               { field: 'userName', title: '登录名称', sortable: true },
               { field: 'realName', title: '用户名称' },
               {
                   field: 'gender', title: '性别', formatter: function (value, row, index) {
                       //0未知 1男 2女
                       switch (row.userStatus) {
                           case 1: return '<span class="badge badge-primary">男</span>'; break;
                           case 2: return '<span class="badge badge-primary">女</span>'; break;
                           default: return '<span class="badge badge-primary">未知</span>'; break;
                       }
                   }
               },
               {
                   field: 'birthday', title: '出生日期', formatter: function (value, row, index) {
                       if (row.birthday == "0001-01-01") {
                           return "";
                       }
                       return row.birthday;
                   }
               },
               { field: 'mobile', title: '手机号' },
               { field: 'departmentName', title: '部门名称' },
               { field: 'positionName', title: '岗位名称' },
               { field: 'roleName', title: '角色名称' },
             ],
            onClickRow: function (row, element) {
                element[0].firstElementChild.firstElementChild.click();
            }
        };
        $.table.init(options);
    }
    /* 用户管理-重新加载数据【必备，添加修改需要调用这个方法刷新数据】*/
    function searchGrid() {
        $.table.search();
    }
    /* 用户管理-部门 */
    function dept() {
        var url = "/OrganizationManage/Department/DepartmentIndex";
        $.modal.openTab("部门管理", url);
    }

    function showResetPasswordForm(id) {
        ys.openDialog({
            title: "重置密码",
            content: '/OrganizationManage/User/ResetPassword?id=' + id,
            height: "220px",
            callback: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.saveForm(index);
            }
        });
    }

    function exportForm() {
        var url = '@Url.Content("~/OrganizationManage/User/ExportUserJson")';
        var postData = $("#searchDiv").formSerialize();
        ys.exportExcel(url, postData);
    }

    function importForm() {
      ys.openDialog({
            title: "导入用户数据",
            content: '@Url.Content("~/OrganizationManage/User/UserImport")',
            height: "280px",
            callback: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.saveForm(index);
            }
        });
    }
</script>
